<template>
  <div class="ConsultationData" id="ConsultationDataEcharts"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

import { getCount } from "@/api/home.js";

export default {
  name: "ConsultationData",
  props: ["promptList"],
  data() {
    return {
      datas: [],
    };
  },
  created() {
  },
  mounted() {
    // 咨询趋势数据
    this.getTrendcurveGateway();
  },

  watch: {
    promptList: {
      handler(val, oldVal) {
        val.forEach((item) => {
          this.datas.push(item.value);
        });
      },
      deep: true,
      immediate: false
    },
    
    datas(val, oldVal) {
        // console.log(1111, val, oldVal); //val：是新值 oldVal：是旧值
      this.getTrendcurveGateway(val);
    },
  },

  methods: {
    // 咨询趋势图表
    getTrendcurveGateway(data) {
      const datas = JSON.parse(JSON.stringify(this.datas));
      const myChart = this.$echarts.init(
        document.getElementById("ConsultationDataEcharts")
      );
      myChart.setOption({
        //修改柱形颜色
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#00DBFC", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#00506B", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          padding: 0,
          borderColor: "#005583",
          backgroundColor: "rgba(255,255,255,0.4)",
          textStyle: {
            color: "#009FCE",
            fontSize: 12,
          },
          //提示框内容格式器
          formatter: (e) => {
            let data = e[0];
            //字符串模板
            let context = `
               <div style="background: radial-gradient(circle, #00152E, #003455); padding: 8px;">
                   <p><span>名称：</span><span>${data.axisValue}</span></p>
                   <p><span>咨询数量: </span><span>${data.data}</span></p>
               </div>
            `;
            return context;
          },
        },

        //修改图表大小
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["TV电视端", "PAD平板端", "小淮医管家"],
            axisTick: {
              alignWithLabel: true,
            },
            //修改横轴刻度文字颜色
            axisLabel: {
              color: "rgba(0, 129, 172, 1)",
              fontsize: 12,
            },
            axisLine: {
              show: false,
            },
            //
          },
        ],
        yAxis: [
          {
            type: "value",
            // 修改y轴的字体颜色
            axisLabel: {
              color: "rgba(0, 129, 172, 1)",
              fontsize: 12,
            },
            //修改y轴线条样式
            axisLine: {
              LineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 2,
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            //修改bar的宽度
            barWidth: "20%",
            data: datas,
            //直角变圆角
            itemStyle: {
              barBorderRadius: 5,
            },
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// 咨询趋势图表
.ConsultationData {
  height: 13.5rem;
  padding: 0 0.8125rem 0 1.0625rem;
}
</style>
